<template>
	<!-- 新首页 -->
	<view class="">
		<view class="cardWp">
			<!-- 分享名片显示 -->
			<view>
				<!-- 名片样式 -->
				<view class="card">
					<card-style1 :userInfo="otherUserInfo" v-if="otherUserInfo.style==0">
					</card-style1>
					<card-style2 :userInfo="otherUserInfo" v-else-if="otherUserInfo.style==1">
					</card-style2>
					<card-style4 :userInfo="otherUserInfo" v-else-if="otherUserInfo.style==3">
					</card-style4>
					<card-style5 :userInfo="otherUserInfo" v-else-if="otherUserInfo.style==4">
					</card-style5>
					<default-card :userInfo="otherUserInfo" bgStyle="2"
						v-else-if="otherUserInfo.style==5"></default-card>
					<card-style6 :userInfo="otherUserInfo" v-else-if="otherUserInfo.style==6">
					</card-style6>
					<default-card :userInfo="otherUserInfo" bgStyle="3"
						v-else-if="otherUserInfo.style==7"></default-card>
					<!-- 默认名片 -->
					<default-card :userInfo="otherUserInfo" v-else></default-card>
				</view>
				<!--导航栏 -->
				<view class="showGirdWp">
					<view class="gridWp">
						<view class="u-grid-item" v-for="(item,i) in girdList" :key="i"
							@click="handleOtherGridTap(item,i)">
							<view class="imgWp">
								<img :src="item.imgUrl" alt="">
							</view>
							<view class="text">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
				<!-- 递名片 -->
				<view class="btnWp">
					<view class="sendCard">
						<!-- 分享好友的的名片 -->
						<button border='none' class="shareBtn" @click="addFriend">添加好友</button>
					</view>
					<view class="foundCard" @click="goToProduct">
						产品展示
					</view>
					<view class="lineBlock">
					</view>

				</view>
				<!-- 简介 -->
				<view class="personInfo">
					<view class="title" style="font-weight: 600;">
						个人简介/业务方向
					</view>
					<view class="personInfoTagWp" v-if="showTags.length">
						<view class="tagItemWp" v-for="(item, index) in showTags" :key="index">
							<view class="tagItem"
								:style="{color:item.color?item.color:'#413BF3',backgroundColor:item.bgColor?item.bgColor:'#fff'}">
								{{item.name}}
							</view>
						</view>
					</view>
					<textarea :value='otherUserInfo.introduction' auto-height readonly :maxlength="-1" disabled
						style="font-size: 28rpx;width:100%;padding: 20rpx 0; line-height: 50rpx;" />
				</view>
				<!-- 我的照片 -->
				<view class="photoWp" v-if="otherUserInfo.imageList">
					<u-swiper height='400' imgMode='aspectFill' :list="myImageList" @click="showFullImg"
						:autoplay="true" circular>
					</u-swiper>
				</view>
				<!-- 公司简介部分 -->
				<company-index :companyData="companyData"></company-index>
				<view class="paddingBar">
				</view>
				<!-- 热门商品 -->
				<view class="hotGoodsWp" v-if="hotGoodsList.length">
					<view class="title">
						热门商品
					</view>
					<view class="hotGoods">
						<cus-swiper :list="hotGoodsList" height='550' keyName="goodsImage" showTitle
							@click="clickSwiperItem" previousMargin="100" nextMargin="100" circular :autoplay="true"
							radius="5" bgColor="#ffffff">
							<view slot="indicator" class="indicator">
								<view class="indicator__dot" v-for="(item, index) in hotGoodsList" :key="index"
									:class="[index === current && 'indicator__dot--active']">
								</view>
							</view>
						</cus-swiper>
					</view>
				</view>

			</view>
			<view class="fabBtn" @tap.stop="goToHomePage">
				<img src="https://file.casugn.com/storecompcard//Et1rzcSsTeX94f4267275af761c488cee6ec5b4b99b6_1659670336222.png"
					alt="">
			</view>
		</view>
		<!--弹窗 -->
		<u-popup :show="showGridListPopup" :round="30" @close='handleGridListItemCancel' mode="bottom"
			:closeOnClickOverlay='true' closeable>
			<view class="gridPopupWp">
				<view class="gridPopupListItem">
					{{gridListPopupTitle?gridListPopupTitle:'暂无信息'}}
				</view>
				<view class="gridPopupListItem text-b"
					@click="handleGridListItem(gridListPopupMain,gridListPopupTitle)">
					{{gridListPopupMain}}
				</view>
				<view class="gridPopupListItem" @click="handleGridListItemCancel">
					取消
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		girdList,
	} from '@/config/staticConfig.js'
	import cardStyle1 from '@/components/cardStyle/cardStyle1.vue'
	import cardStyle2 from '@/components/cardStyle/cardStyle2.vue'
	import cardStyle4 from '@/components/cardStyle/cardStyle4.vue'
	import cardStyle5 from '@/components/cardStyle/cardStyle5.vue'
	import cardStyle6 from '@/components/cardStyle/cardStyle6.vue'
	import defaultCard from '@/components/cardStyle/defaultCard.vue'
	import companyIndex from '@/components/companyIndex/companyIndex.vue'
	import {
		mapState
	} from 'vuex'
	import baseConfig from '@/config/baseUrl.js'
	export default {
		components: {
			cardStyle1,
			cardStyle2,
			cardStyle4,
			cardStyle5,
			cardStyle6,
			defaultCard,
			companyIndex
		},
		data() {
			return {
				otherCardId: null, //他人分享的名片id
				showGridListPopup: false,
				gridListPopupTitle: '',
				gridListPopupMain: '',
				girdList,
				avatarList: [],
				photoList: null,
				hotGoods: null,
				qrCodeImgUrl: '', //生成的小程序码地址
				hotGoodsList: [],
				current: 0,
				personInfoTags: [],
				todayViews: '',
				totalViews: '',
				otherUserInfo: {},
				companyData: {},
				myImageList: [],
				openId: ''
			};
		},
		computed: {
			showTags() {
				if (this.personInfoTags.length == 0) {
					return []
				}
				let newarr = this.personInfoTags.filter(item => {
					return item.isDel !== 1
				})
				return newarr
			},
			...mapState(['userInfo'])
		},
		created() {
			uni.hideTabBar()
			this.getOpenId()
		},
		onLoad(opt) {
			console.log(opt, 'onload~~');
			this.option = opt
			if (opt.cardId) {
				this.otherCardId = opt.cardId
				this.queryOtherUserInfoByCardId()
				return
			}
			if (opt.scene) {
				let scene = decodeURIComponent(opt.scene);
				console.log(scene, 'scene');
				if (scene) {
					this.otherCardId = scene
					console.log(this.otherCardId, 'this.otherCardId');
					this.queryOtherUserInfoByCardId()
					return
				}

			}
		},
		methods: {
			async getOpenId() {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: async (loginRes) => {
						let {
							code
						} = loginRes
						let res = await this.$api.getOpenIdByCode({
							code
						});
						if (res) {
							this.openId = res.openid
							uni.setStorageSync('openId', this.openId)
						}
					}
				})
			},
			//通过分享人的cardId 查询
			async queryOtherUserInfoByCardId() {
				if (this.otherCardId) {
					let res = await this.$api.queryCartById({
						id: this.otherCardId
					})
					if (res.success) {
						this.otherUserInfo = res.result
						if (res.result.imageList == null || res.result.imageList.length == 0) {
							this.myImageList = []
						} else {
							if (res.result.imageList.length > 0) {
								this.myImageList = []
								if (res.result.imageList.indexOf(',') == -1) {
									this.myImageList.splice(0, 1, res.result.imageList)
								} else {
									this.myImageList = res.result.imageList.split(',')
								}
							}
						}
						if (res.result.bcCardLabelList.length > 0) {
							this.personInfoTags = res.result.bcCardLabelList.filter(item =>
								item.isDel != 1)
						} else {
							this.personInfoTags = []
						}
						if (res.result.bcCompanyAbout == null) {
							this.companyData = {}
							this.companyData.swiperList = []
						} else {
							this.companyData = res.result.bcCompanyAbout || {}
							if (this.companyData.carousel.length > 0 && this.companyData.carousel && this.companyData
								.carousel != undefined) {
								let arr = this.companyData.carousel.split(",")
								this.companyData.swiperList = arr.map(item => {
									let newItem = {
										url: item,
										filePath: item
									}
									return newItem
								})
							}
						}
						uni.setNavigationBarTitle({
							title: this.otherUserInfo.name ? this.otherUserInfo.name : '分享' + '的主页'
						});
						this.queryBrowseInfo(this.otherCardId)
						this.getHotGoods(res.result.openId)
					} else {
						console.log('查询分享人个人信息失败');
					}
				}
			},
			//查询名片的浏览用户头像、总浏览量和今日浏览量
			async queryBrowseInfo(cardId) {
				let res = await this.$api.queryBrowseInfo({
					cardId
				})
				if (res.success) {
					console.log('查询名片的浏览用户头像、总浏览量和今日浏览量', res);
					this.avatarList = res.result.photoList
					this.todayViews = res.result.todayViews
					this.totalViews = res.result.totalViews
				}
			},
			//添加好友
			async addFriend() {
				let cardId = uni.getStorageSync('cardId')
				let data = uni.getStorageSync('openId')
				let userInfo = uni.getStorageSync(`_userInfo`)
				if (!userInfo || !userInfo.id) {
					uni.showModal({
						content: '创建名片后才能添加好友',
						success: (res) => {
							if (res.confirm) {
								uni.showToast({
									title: '返回主页创建名片',
									icon: 'none'
								});
								return this.goToHomePage()
							} else if (res.cancel) {
								return uni.showToast({
									title: '请先返回主页创建名片',
									icon: 'none'
								});
							}
						}
					});
				}
				if (cardId == this.otherCardId) {
					return uni.showToast({
						title: '不能添加自己为好友',
						icon: 'none'
					});
				}
				console.log(userInfo, '_userInfo');
				const {
					id: friendId,
					name,
					head,
					unionId
				} = userInfo
				let payload = {
					//使用好友数据
					openId: this.otherUserInfo.openId,
					cardId: this.otherUserInfo.id,
					//使用自身数据
					name,
					head,
					friendOpenId: data.openid,
					friendId,
					friendUnionId: unionId,
				}
				let res = await this.$api.addNewFriend(payload)
				if (res.success) {
					uni.showToast({
						title: '已发送好友申请',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			//前往应用首页
			goToHomePage() {
				this.$store.commit('setIsSelf', true)
				uni.setStorageSync('sceneStatus', 1001)
				uni.switchTab({
					url: '/pages/card/card'
				})
			},
			showFullImg(i) {
				uni.previewImage({
					urls: this.myImageList,
					current: i,
				})
			},
			goToGuest() {
				let plugin = requirePlugin('routePlan');
				const key = baseConfig.mapData.mapKey; //使用在腾讯位置服务申请的key
				const referer = baseConfig.mapData.appName //调用插件的app的名称
				//模拟数据
				let endPoint = this.otherUserInfo.coord || ''
				console.log(endPoint);
				if (endPoint.length < 1) {
					return uni.showToast({
						title: '用户未设置坐标信息',
						icon: 'none'
					});
				}
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer +
						'&endPoint=' + endPoint
				});
			},
			//去好友产品展示页面
			goToProduct() {
				uni.navigateTo({
					url: `/pagesCard/friendProductPage/friendProductPage?companyId=${this.otherUserInfo.companyId?this.otherUserInfo.companyId:''}`
				})
			},
			//显示分享人的小程序码
			async showMyQrcode() {
				uni.showLoading({
					title: 'loading'
				})
				//发送到后台scene 生成指定小程序码图片
				if (!this.otherUserInfo.id) {
					uni.hideLoading()
					return uni.showToast({
						title: '请先创建名片',
						icon: 'none'
					});
				}
				let scene = String(this.otherUserInfo.id);
				let params = {
					scene,
					page: 'pagesCard/shareCard/shareCard',
				}
				let res = await this.$api.getPhotoUrl(params)
				if (res.success) {
					this.qrCodeImgUrl = res.result
					// 跳转新页面携带参数
					uni.navigateTo({
						url: "/pagesCard/userQrCode/userQrCode?qrCodeImgUrl=" +
							encodeURIComponent(JSON.stringify(this.qrCodeImgUrl)) + '&openId=' + this
							.otherUserInfo.openId,
					});
				} else {
					uni.showToast({
						title: '生成小程序码错误',
						icon: 'none'
					});
				}
				uni.hideLoading()
			},
			//获取热门商品
			async getHotGoods(openId) {
				if (!openId) {
					return console.error('没有获取到openid')
				}
				let payload = {
					openId,
					status: 0
				}
				let res = await this.$api.getHotGoods(payload)
				if (res.success) {
					this.hotGoodsList = res.result.records
					console.log(this.hotGoodsList, '热门商品');
				} else {
					console.log('热门商品获取失败');
					this.hotGoodsList = []
				}
			},

			//分享人操作
			handleOtherGridTap(item, i) {
				switch (i) {
					case 0:
						let that = this

						// 读取 小程序已经授权的权限
						uni.getSetting({
							success(res) {
								// 判断是否拥有此权限进行拉起授权  和 重新授权功能
								if (!res.authSetting['scope.addPhoneContact']) {
									// 未授权此项权限 拉起授界面
									uni.authorize({
										scope: 'scope.addPhoneContact',
										success() {
											// 授权成功后 就可以执行 需要权限的  操作函数了
											uni.addPhoneContact({
												nickName: that.otherUserInfo.name,
												firstName: that.otherUserInfo.name,
												remark: '备注',
												mobilePhoneNumber: that.otherUserInfo.mobile,
												weChatNumber: that.otherUserInfo.wechat,
												organization: that.otherUserInfo.company, //公司
												title: that.otherUserInfo.position, //职位
												workPhoneNumber: that.otherUserInfo
													.workPhoneNumber ? that.otherUserInfo
													.workPhoneNumber : '', //工作电话
												email: that.otherUserInfo.mail ? that
													.otherUserInfo.mail : '',
												url: that.otherUserInfo.url ? that.otherUserInfo
													.url : '',
												addressCountry: that.otherUserInfo
													.addressCountry ? that.otherUserInfo
													.addressCountry : '', //国家
												addressState: that.otherUserInfo
													.addressState ? that.otherUserInfo
													.addressState : '', //省份
												addressCity: that.otherUserInfo.addressCity ?
													that.otherUserInfo.addressCity : '', //城市
												addressStreet: that.otherUserInfo
													.addressStreet ? that.otherUserInfo
													.addressStreet : '', //街道
												addressPostalCode: that.otherUserInfo
													.addressPostalCode ? that.otherUserInfo
													.addressPostalCode : '', //邮政编码
												success: function() {
													console.log('success');
												},
												fail: function() {
													console.log('fail');
													uni.showToast({
														title: '请授权以保存到通讯录',
														icon: 'none'
													});

												},
												cancel: function() {
													uni.showToast({
														title: '已取消',
														icon: 'none'
													});
												}
											});

										},
										fail(err) {
											/*
											 第一次拒绝授权后必须在 uni.authorize的fail中使用
											 uni.openSetting 才能进入设置界面打开授权按钮
											 */
											uni.showToast({
												title: '拒绝授权',
												icon: 'none'
											});
											// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
											uni.showModal({
												title: '是否重新授权',
												success(res) {
													if (res.confirm) {
														uni.openSetting({
															success() {
																console.log(
																	'开启权限成功');
															},
															fail() {
																console.log(
																	'开启权限失败');
															}
														});
													} else if (res.cancel) {
														console.log('拒绝开启开启权限');
													}
												}
											});
										}
									});
								} else {
									uni.addPhoneContact({
										nickName: that.otherUserInfo.name,
										firstName: that.otherUserInfo.name,
										remark: '备注',
										mobilePhoneNumber: that.otherUserInfo.mobile,
										weChatNumber: that.otherUserInfo.wechat,
										organization: that.otherUserInfo.company, //公司
										title: that.otherUserInfo.position, //职位
										workPhoneNumber: that.otherUserInfo.workPhoneNumber ? that
											.otherUserInfo.workPhoneNumber : '', //工作电话
										email: that.otherUserInfo.mail ? that.otherUserInfo.mail : '',
										url: that.otherUserInfo.url ? that.otherUserInfo.url : '',
										addressCountry: that.otherUserInfo.addressCountry ? that
											.otherUserInfo.addressCountry : '', //国家
										addressState: that.otherUserInfo.addressState ? that
											.otherUserInfo.addressState : '', //省份
										addressCity: that.otherUserInfo.addressCity ? that.otherUserInfo
											.addressCity : '', //城市
										addressStreet: that.otherUserInfo.addressStreet ? that
											.otherUserInfo.addressStreet : '', //街道
										addressPostalCode: that.otherUserInfo.addressPostalCode ? that
											.otherUserInfo
											.addressPostalCode : '', //邮政编码
										success: function() {
											console.log('success');
										},
										cancel: function() {
											uni.showToast({
												title: '已取消',
												icon: 'none'
											});
										}
									});
								}
							}
						});

						break;
					case 1:
						//打电话
						this.showGridListPopup = true
						this.gridListPopupTitle = this.otherUserInfo.mobile
						this.gridListPopupMain = '呼叫'
						break;
					case 2:
						//邮箱地址
						this.showGridListPopup = true
						this.gridListPopupTitle = this.otherUserInfo.mail
						this.gridListPopupMain = '复制邮箱'
						break;
					case 3:
						//跳转导航页面
						this.goToGuest()
						break;
				}
			},
			handleGridListItemCancel() {
				this.showGridListPopup = false
				this.gridListPopupTitle = ''
				this.gridListPopupMain = ''
			},
			handleGridListItem(text) {
				switch (text) {
					case '呼叫':
						let phoneNumber = String(this.gridListPopupTitle)
						uni.makePhoneCall({
							phoneNumber, //仅为示例
							success: () => {
								this.showGridListPopup = false
							}
						});
						break;
					case '复制邮箱':
						uni.setClipboardData({
							data: this.gridListPopupTitle,
							success: () => {
								this.showGridListPopup = false
							}
						});
						break;
					case '复制微信号':
						uni.setClipboardData({
							data: this.gridListPopupTitle,
							success: () => {
								this.showGridListPopup = false
							}
						});
						break;
				}
			},
			//点击轮播图
			clickSwiperItem(index) {
				let item = this.hotGoodsList[index]
				console.log(item, '点击轮播图');
				this.addGoodsStatistics(item)
				this.toDishesInfo(item)
			},
			//增加商品点击量
			async addGoodsStatistics(item) {
				//添加统计数据点击量
				console.log(this.userInfo, '访问人this.userInfo');
				let payload = {
					//被访问人信息
					goodsId: item.goodsId,
					businessCard: this.otherUserInfo.id,
					openId: this.otherUserInfo.openId,
					goodsPrice: item.goodsPrice,
					goodsName: item.goodsName,
					goodsImage: item.goodsImage,
					//访问人信息
					friendId: this.userInfo.id,
					name: this.userInfo.name,
					unionid: this.userInfo.unionId,
					status: 0,
					isDel: 0
				}
				let res = await this.$api.addShoppingStatistics(payload)
				if (res.success) {
					console.log(res.result);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			},
			// 跳转优品会小程序商品详情页面
			toDishesInfo(item) {
				let openId = uni.getStorageSync('openId')
				// if(!openId){
				// 	return uni.showToast({
				// 		title: '请先创建名片',
				// 		icon: 'none'
				// 	});
				// }
				wx.navigateToMiniProgram({
					appId: 'wxf5b2071cea9a5289',
					path: "standard/product/detail",
					extraData: {
						// 跳转其他小程序携带的参数
						"productId": item.defaultProductId,
						"goodsId": item.goodsId,
						"openId": openId.openId,
						"unionId": openId.unionId,
						"flag": "1"
					},
					// {"productId":"200001160018","goodsId":"100001140018"}
					envVersion: __wxConfig.envVersion, //获取当前用户的小程序版本（开发，体验，线上版）
					success(res) {
						// 打开成功
						console.log('跳转成功', res)
					},
					fail: err => {
						console.log('跳转失败', err);
					},
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮且是本人分享
				console.log('来自页面内分享按钮');
				return {
					title: ``,
					path: '/pagesCard/shareCard/shareCard?cardId=' + this.otherUserInfo.id
				}
			}
			return {
				title: ``,
				path: '/pagesCard/shareCard/shareCard?cardId=' + this.otherUserInfo.id
			}

		},
	}
</script>

<style lang="scss">
	.cardWp {
		// background-color: #F8F9FF;
		padding-bottom: 180upx;

		.searchBox {
			// background-color: #fff;
			display: flex;
			padding: 30upx;
			align-items: center;

			.inputWp {
				background-color: #E4ECFF;
				border-radius: 40upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				height: 80upx;

				.text {
					margin-left: 40upx;
					flex: 1;
					font-size: 24upx;
					font-weight: 400;
					color: #999999;
				}

				.iconWp {
					margin-right: 30upx;
				}
			}

			.moreImgWp {
				background-color: #E8EFF9;
				width: 80upx;
				height: 80upx;
				border-radius: 30%;
				margin-left: 20upx;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 70upx;
					height: 70upx;
				}
			}
		}


		.gridWp {
			margin: 40upx;
			display: flex;
			justify-content: space-between;

			.u-grid-item {
				text-align: center;
				flex: 1;

				.imgWp {
					display: flex;
					justify-content: center;
					align-items: center;
					padding-bottom: 8upx;

					img {
						text-align: center;
						width: 80upx;
						height: 80upx;
					}
				}

				.text {
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 30upx;
				}
			}
		}

		.btnWp {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30upx;
			position: relative;
			overflow: hidden;

			.lineBlock {
				height: 100upx;
				width: 26upx;
				background-color: #fff;
				position: absolute;
				left: 50%;
				transform: translateX(-50%) rotate(13deg);
			}

			.sendCard {
				color: #fff;
				background-color: #423CFE;
				text-align: center;
				line-height: 80upx;
				font-size: 30upx;
				flex: 1;
				border-radius: 50upx 0 0 50upx;
				// position: relative;
				// .shareBtn{
				// 	position: absolute;
				// }

				.shareBtn {
					color: #fff;
					background-color: #7b77fe;
					text-align: center;
					line-height: 80upx;
					font-size: 30upx;
					flex: 1;
					border-radius: 50upx 0 0 50upx;
				}
			}

			.triangle1 {
				// height: 80upx;
				// width: 32upx;
				// background: linear-gradient(45deg, #423CFE, #fff , transparent 50%, transparent 100%);
				width: 0;

				height: 0;

				border-top: 30px solid #423CFE;

				border-right: 30px solid transparent;
			}

			.triangle2 {
				height: 80upx;
				width: 32upx;
				background: linear-gradient(45deg, #1D2B56, #1D2B56 50%, transparent 50%, transparent 100%);
			}

			.foundCard {
				flex: 1;
				line-height: 80upx;
				background-color: #f8aa69;
				color: #fff;
				text-align: center;
				font-size: 30upx;
				border-radius: 0 50upx 50upx 0;
			}
		}

		.browse {
			margin: 40upx 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.browseStatistics {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.avatar {
					flex: 1;
					display: flex;

					img {
						width: 60upx;
						height: 60upx;
						margin: 0 -10upx;
					}
				}

				.todayNum {
					margin-left: 40upx;
					font-size: 30upx;

					.green {
						color: #1BDC24;
						margin: 0 10upx;
					}
				}

			}

			.totalNumWp {
				font-size: 30upx;
				display: flex;

				.totalNum {
					margin: 0 10upx;
					font-size: 24upx;
					font-weight: 400;
					color: #000000;
				}
			}

		}

		.personInfo {
			margin: 40upx 30upx;

			.personInfoTagWp {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.tagItemWp {
					margin: 0 20upx 20upx 0;

					.tagItem {
						border-radius: 20upx;
						padding: 22upx 42upx;
						font-size: 24upx;
						font-weight: 400;
						letter-spacing: 20
					}


				}
			}

			.title {
				letter-spacing: -2upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 36upx;
				padding-bottom: 40upx;
			}

			.infoWp {

				.info {
					font-size: 30upx;
					font-weight: 400;
					color: #333333;
					line-height: 40upx;
				}
			}
		}

		.companyInfoWp {
			margin: 40upx 30upx;

			.title {
				letter-spacing: -2upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 36upx;
				padding-bottom: 40upx;
			}
		}

		.banner {

			img {
				width: 100%;
				height: 331upx;
			}
		}

		.showGirdWpText {
			font-size: 30upx;
			color: #333;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.hot {
			box-sizing: border-box;
			margin: 40upx 30upx;

			.title {
				display: flex;
				justify-content: space-between;
				margin: 40upx 0;

				.left {
					flex: 1;
					font-size: 36upx;
					font-weight: 600;
					color: #000000;
					line-height: 30upx;
				}

				.right {
					width: 30upx;
					color: #666666;
					font-size: 36upx;
				}
			}

			.hotGoodsWp {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;

				.hotGoodsItem {
					border: 1upx solid #eee;
					box-sizing: border-box;
					border-radius: 20upx;
					width: 49%;
					margin: 5upx 0;
					display: flex;
					align-items: center;
					background-color: #fff;
					height: 100upx;

					&:nth-child(2n) {
						margin-left: 10upx;
					}

					.left {
						width: 66upx;
						height: 66upx;
						margin: 20upx;

						img {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						margin-left: 40upx;
						font-size: 30upx;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}



		.nomore {

			padding: 20upx;
			height: 60upx;

		}

		.photoWp {
			margin: 30upx;

			.photoItemWp {
				padding-bottom: 30upx;

				width: 690upx;
				height: 400upx;

				img {
					border-radius: 40upx;
					width: 100%;
					height: 100%;
				}
			}
		}

		.paddingBar {
			background-color: #F8F9FF;
			height: 30upx;
			width: 100%;
		}

		.fabBtn {
			z-index: 99;
			position: fixed;
			bottom: 20vh;
			right: 50upx;
			width: 100upx;
			height: 100upx;
			background-color: #6863fe;
			border-radius: 50%;
			box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.08) inset;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 60%;
				height: 60%;
			}
		}



		.hotGoodsWp {
			margin: 40upx 30upx;

			.title {
				font-size: 30upx;
				font-weight: 400;
				color: #333333;
				padding-bottom: 40upx;
			}

			.hotGoods {}
		}
	}

	.gridPopupWp {
		height: 300upx;

		.text-b {
			color: #423BFE !important;
		}

		.gridPopupListItem {
			text-align: center;
			line-height: 100upx;
			height: 100upx;
			border-bottom: 1upx solid #eee;
			font-size: 32upx;
			font-weight: 300;
			color: #333333;
		}
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>
<!-- swiper 自定义轮播点 -->
<style lang="scss">

</style>